<template>
  <div>
    <el-container style="height: 100vh;">
      <el-aside width="200px">
        <el-menu :default-openeds="['1']" class="el-menu-vertical-demo" @select="handleSelect">
          <el-submenu index="1">
            <template slot="title">功能菜单</template>
            <el-menu-item index="/dashboard/face-recognition">监控中心</el-menu-item>
            <el-menu-item v-if="role === 'admin'" index="/dashboard/user-management">人员信息管理中心</el-menu-item>
            <el-menu-item index="/dashboard/alarm-center">告警中心</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <div class="header-content">
            <h2 class="system-title">欢迎来到银行金库智能化安防系统</h2>
            <div class="user-info">
              <el-dropdown>
                <span class="el-dropdown-link">
                  {{ username }} <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="logout">退出系统</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'DashBoard',
  data() {
    return {
      username: localStorage.getItem('username') || '用户名',
      role: localStorage.getItem('role') || 'guest'
    };
  },
  methods: {
    handleSelect(key) {
      this.$router.push(key);
    },
    logout() {
      localStorage.removeItem('username');
      localStorage.removeItem('role');
      this.$router.push('/login');
    }
  }
};
</script>

<style scoped>
.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.system-title {
  text-align: center; /* 居中显示 */
  margin: 0; /* 去除标题的默认 margin */
  font-size: 24px; /* 根据需要调整字体大小 */
}

.user-info {
  margin-right: 20px;
}
</style>
